import React from 'react';
import "./detailssort.css"
import { Link, useParams, useNavigate, useLocation } from "react-router-dom"
import { Tabs, InfiniteScroll, List } from 'antd-mobile'
import { getMateria, getMateriaVideo } from '../../api/home'

// 类组件
function Detailssort() {
    let navigate = useNavigate();//链接跳转
    let params = useParams(); //获取链接数据

    let [materia, setMateria] = React.useState(null)
    let [materiaVideo, setMateriaVideo] = React.useState(null)


    let [Num, editNum] = React.useState(6)
    let [flag, Editflag] = React.useState(false)
    let [page, setPage] = React.useState(null)

    React.useEffect(() => {
        getMateria(params.id).then(data => {
            setMateria(data.data)
        })
        getMateriaVideo(params.id, Num).then(data => {
            setMateriaVideo(data.data.data)
            setPage(data.data.total)
        })
    }, [])

    return materia ? (
        <div className='detailssort'>

            <div className="header">

                <div className="header-wrap">
                    <i onClick={() => navigate(-1)} className="iconfont icon-zuobian"></i>
                    <div className="title">
                        {materia.material_name}
                    </div>
                    <i className="iconfont icon-sort"></i>

                </div>

            </div>

            {/* 视频 */}
            <div className="video">
                <video src={materia.video} autoPlay muted controls></video>
            </div>



            {/* Tab */}
            <div className="goods-detail product-box">
                <div className="nav-height">
                    <div className="nav-box">
                        <Tabs
                            style={{
                                '--title-font-size': '13px',
                                '--fixed-active-line-width': '50px'
                            }}>
                            <Tabs.Tab title='相关菜例' key='one'>
                                <div className='goods-page'>
                                    <div className='page-relate-list'>
                                        <div className='box'>
                                            <ul>
                                                {
                                                    materiaVideo && materiaVideo.map(item => {
                                                        return (
                                                            <Link to={'/detailsvideo/' + item.dishes_id} key={item.dishes_id}>
                                                                <li>
                                                                    <div className='img'>
                                                                        <img src={item.image} />
                                                                        <i className='ico'></i>
                                                                    </div>
                                                                    <div className='text'>

                                                                        <h6>{item.title}</h6>
                                                                        <div className="txt">{item.content}</div>
                                                                        <div className='bar'>
                                                                            <div className='rows'>
                                                                                <i className='icon icon-cook'></i>
                                                                                <span>难度：{item.hard_level}</span>

                                                                                {
                                                                                    item.taste ? (<><div className='line'></div><i className='icon icon-taste'></i><span>口味：{item.taste}</span></>) : ("")
                                                                                }

                                                                            </div>
                                                                            <div className='rows'>
                                                                                <i className='icon icon-time'></i>
                                                                                烹饪时间：{item.cooking_time}
                                                                            </div>
                                                                        </div>
                                                                    </div>


                                                                </li>
                                                            </Link>

                                                        )
                                                    })
                                                }
                                                {/* <li>
                                                    <div className='img'>
                                                        <img src={materia.applied_image} />

                                                    </div>
                                                    <div className='text'>

                                                        <h6>蒜蓉菜心</h6>
                                                        <div className="txt">蒜蓉菜心</div>
                                                        <div className='bar'>
                                                            <div className='rows'>
                                                                <i className='icon icon-cook'></i>
                                                                难度：容易
                                                                <div className='line'></div>
                                                                <i className='icon icon-taste'></i>
                                                                口味：
                                                            </div>
                                                            <div className='rows'>
                                                                <i className='icon icon-time'></i>
                                                                烹饪时间：10分钟
                                                            </div>
                                                        </div>
                                                    </div>


                                                </li> */}
                                            </ul>
                                            <InfiniteScroll loadMore={async () => {
                                                setTimeout(() => {
                                                    Editflag(true)

                                                }, 2000)
                                                // console.log(flag);
                                                Num += 2
                                                editNum(Num)
                                                // console.log(Num);
                                                await getMateriaVideo(params.id, Num).then(data => {
                                                    // console.log(data);
                                                    setMateriaVideo(data.data.data)

                                                })
                                                setTimeout(() => {
                                                    Editflag(false)

                                                }, 2000)


                                            }} hasMore={flag == false && Num < page}
                                                threshold={30}
                                            />
                                        </div>
                                    </div>
                                </div>

                            </Tabs.Tab>
                            <Tabs.Tab title='选购要诀' key='two'>
                                <div className='goods-page'>
                                    <div className='page-material'>
                                        <div className='box'>
                                            <img src={materia.pick_image} />
                                            <div className='txt'>
                                                {materia.pick}

                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </Tabs.Tab>
                            <Tabs.Tab title='营养功效' key='three'>
                                <div className='goods-page'>
                                    <div className='page-material'>
                                        <div className='box'>
                                            <img src={materia.image} />
                                            <div className='txt'>
                                                {materia.effect}

                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </Tabs.Tab>
                            <Tabs.Tab title='实用百科' key='four'>
                                <div className='goods-page'>
                                    <div className='page-material'>
                                        <div className='box'>
                                            <img src={materia.applied_image} />
                                            <div className='txt'>
                                                {materia.applied}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </Tabs.Tab>

                        </Tabs>
                    </div>
                </div>
            </div>
        </div>
    ) : null



}


export default Detailssort;